﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="ZX.Web.UI.Controls.BasePage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="template/matrix-1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="template/matrix-1/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="template/matrix-1/css/fullcalendar.css" />
    <link rel="stylesheet" href="template/matrix-1/css/matrix-style.css" />
    <link rel="stylesheet" href="template/matrix-1/css/matrix-media.css" />
    <link href="template/matrix-1//font-awesome/css/font-awesome.css" rel="stylesheet" />
    <style type="text/css">
        #sYear,#sYear1,#sYear2,#sReason,#sMonth
        {
            width:100px;
        }
        .span5
        {
            margin:1px;
        }
        
        table
        {
            width: 100%;
            border: 1px;
        }
        thead
        {
            border: 1px solid #ccc;
        }
        tr
        {
            height: 25px;
            border: 1px solid #ccc;
        }
        thead th
        {
            border: 1px solid #ccc;
            background: #e4e7e2;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            height: 17px;
            padding: 2px;
        }
        
        .tr_1
        {
            background-color: #f0ffff;
        }
        
        .tr_0
        {
            background-color: #fff;
        }
        
        .tab-pane div 
        {
            height:400px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
<div>
     <div class="widget-box">
          <div class="widget-title">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#tab1">年</a></li>
              <li><a data-toggle="tab" href="#tab2">季</a></li>
              <li><a data-toggle="tab" href="#tab3">月</a></li>
            </ul>
          </div>
          <div class="widget-content tab-content">
            <div id="tab1" class="tab-pane active">
               年
               <select id="sYear">
                   <option value="2013">2013</option>
                   <option value="2014">2014</option>
                   <option value="2015">2015</option>
                   <option value="2016">2016</option>
                   <option value="2017">2017</option>
                   <option value="2018">2018</option>
                   <option value="2019">2019</option>
                   <option value="2020">2020</option>
               </select>
               <div>
                <table id="sYearTable">
                    <thead id="sYearTableThead">
                        <tr id="{0}">
                            <th style="width: 20%">
                                排名
                            </th>
                            <th style="width:  25%">
                                姓名
                            </th>
                            <th style="width:  25%">
                                分公司
                            </th>
                            <th style="width:  30%">
                                业绩
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
               </table>
               
               </div>
            </div>
            <div id="tab2" class="tab-pane">
              年<select id="sYear1">
                   <option value="2013">2013</option>
                   <option value="2014">2014</option>
                   <option value="2015">2015</option>
                   <option value="2016">2016</option>
                   <option value="2017">2017</option>
                   <option value="2018">2018</option>
                   <option value="2019">2019</option>
                   <option value="2020">2020</option>
                   </select>
              季<select id="sReason">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                   <option value="4">4</option>
              </select>
              <div>
             <table id="sReasonTable">
                    <thead id="sReasonTableThead">
                        <tr id="{1}">
                            <th style="width: 20%">
                                排名
                            </th>
                            <th style="width:  25%">
                                姓名
                            </th>
                            <th style="width:  25%">
                                分公司
                            </th>
                            <th style="width:  30%">
                                业绩
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
               </table>
              </div>
            </div>
            <div id="tab3" class="tab-pane">
            年<select id="sYear2">
               <option value="2013">2013</option>
                   <option value="2014">2014</option>
                   <option value="2015">2015</option>
                   <option value="2016">2016</option>
                   <option value="2017">2017</option>
                   <option value="2018">2018</option>
                   <option value="2019">2019</option>
                   <option value="2020">2020</option>
              </select>
             月<select id="sMonth">
                   <option value="01">1</option>
                   <option value="02">2</option>
                   <option value="03">3</option>
                   <option value="04">4</option>
                   <option value="05">5</option>
                   <option value="06">6</option>
                   <option value="07">7</option>
                   <option value="08">8</option> 
                   <option value="09">9</option>
                   <option value="10">10</option>
                   <option value="11">11</option>
                   <option value="12">12</option>
              </select>
              <div>
              <table id="sMonthTable">
                    <thead id="sMonthTableThead">
                        <tr id="{2}">
                            <th style="width: 20%">
                                排名
                            </th>
                            <th style="width:  25%">
                                姓名
                            </th>
                            <th style="width:  25%">
                                分公司
                            </th>
                            <th style="width:  30%">
                                业绩
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
               </table>
            </div>
            </div>
          </div>
        </div>
       </div>
  </form>
<script src="template/matrix-1/js/jquery.min.js"></script> 
<script src="template/matrix-1/js/bootstrap.min.js"></script> 
<script src="template/matrix-1/js/jquery.ui.custom.js"></script> 
<script src="template/matrix-1/js/matrix.js"></script>
<script src="../Scripts/Jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
    function GetData(tableID,flag,tdID,YM,para) {
        var trHTML = '<tr id=\"data_row_{2}\"  class="tr{1}"><td> 排名</td>'
                      +'<td >姓名</td><td > 分公司</td><td>业绩</td></tr>';
        $.get("/Extend/AjaxData/DataTableJsonList.aspx?entity="+getPar1("table")+"&condition=flag='" + flag + "' and YearMonth='" + YM + "'&order=PayMoneyTotal&r=" + Math.random(),
            function (d, t) {
                //alert(d);
                var trTbody = '';
                if (d == '{"total":0,"rows":}') {
                    $(tableID + " tbody").html(trTbody);
                    return;
                }
                var data = eval("(" + d + ")");
                Rows = data.rows;
                $.each(data.rows, function (o) {
                    var _r = (o / 2).toString().indexOf('.5') > 0 ? '_0' : '_1';
                    trTbody = trTbody + trHTML.replace("{1}", _r)
                            .replace("{2}", o)
                            .replace("排名", o + 1)
                            .replace("姓名", data.rows[o].UName)
                            .replace("分公司", data.rows[o].DeptName)
                            .replace("业绩", data.rows[o].PayMoneyTotal)
                });
                $(tableID + " tbody").html(trTbody);
            });
        }

        //(function () {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth() + 1;
        var s = m%3>0? parseInt(m / 3) + 1:parseInt(m/3);


        if (m < 10) {
            m = '0' + m;
            //alert(m);
        }
        var y = date.getFullYear();
        $("#sYear").val(y);
        $("#sYear1").val(y);
        $("#sYear2").val(y);
        $("#sReason").val(s);
        $("#sMonth").val(m);

        GetData("#sMonthTable", "YM", "", y + '-' + m);
        GetData("#sYearTable", "Y", "", y, "");
        GetData("#sReasonTable", "S", "", y + '-' + s, "");
        (function () {
            $("#sMonth").bind("change", function ()
            { GetData("#sMonthTable", "YM", "", $("#sYear2").val() + '-' + $("#sMonth").val()); }
            );
            $("#sReason").bind("change", function ()
            { GetData("#sReasonTable", "S", "", $("#sYear2").val() + '-' + $("#sReason").val()); }
            );
            $("#sYear").bind("change", function ()
            { GetData("#sYearTable", "Y", "", $("#sYear2").val(), ""); }
            );
        })();

</script>
</body>
</html>